$(function () {
    //主轮播图
    $("#bannerInner").tyslide({
        boxh: 420,//盒子的高度
        w: 1000,//盒子的宽度
        h: 390,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20,//控制按钮宽度
        controlsH: 20,//控制按钮高度
        radius: 50,//控制按钮圆角度数
        controlsColor: "#d7d7d7",//普通控制按钮的颜色
        controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
        isShowNum: true //是否显示数字
    });



    // 商品分类
    $('.list>p').mouseover(function () {
        let $index = $(this).index()
        $(`.details div:eq(${$index})`).css({ display: 'block' })
    })
    $('.list>p').mouseout(function () {
        let $index = $(this).index()
        $(`.details div:eq(${$index})`).css({ display: 'none' })
    })
    $('.details div').mouseover(function () {
        $(this).css({ display: 'block' })
    })
    $('.details div').mouseout(function () {
        $(this).css({ display: 'none' })
    })

    // 图书的轮播图
    let book = [1, 2, 3]
    book.forEach(function (v) {
        $("#book" + v).tyslide({
            boxh: 220,//盒子的高度
            w: 328,//盒子的宽度
            h: 220,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: 20,//控制按钮宽度
            controlsH: 3,//控制按钮高度
            radius: 50,//控制按钮圆角度数
            controlsColor: "#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
            isShowNum: true //是否显示数字
        });
    });



    // 图书的选项卡
    $('.bookTop a').hover(function () {
        $('.bookTop a').removeClass('on')
        $(this).addClass('on')
        let $index = $(this).index()
        $('.bookCon').addClass('din')
        console.log($index);
        $(`.bookCon:eq(${$index})`).removeClass('din')
    })


    // 手风琴
    $('.bookRight ul li').hover(function () {
        $(this).find('h4').hide() //addClass('din')
        $(this).find('div').show() //removeClass('din')
        $(this).siblings().find('h4').show()
        $(this).siblings().find('div').hide()
    })
    $('.bookRight ul li span:lt(3)').css({ color: 'red' })


    // 服装的轮播图
    let clothing = [1, 2, 3]
    clothing.forEach(function (v) {
        $("#clothing" + v).tyslide({
            boxh: 342,//盒子的高度
            w: 426,//盒子的宽度
            h: 342,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: 20,//控制按钮宽度
            controlsH: 3,//控制按钮高度
            radius: 50,//控制按钮圆角度数
            controlsColor: "#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
            isShowNum: true //是否显示数字
        });
    });


    // 选项卡
    $('.clothingTop a').mouseover(function () {
        $(this).siblings('a').removeClass('on')
        $(this).addClass('on')
        let $index = $(this).index()
        $(this).closest('.clothingTop').siblings('.clothingre').addClass('din')
        $(this).closest('.clothingTop').siblings('.clothingre').eq($index).removeClass('din')
    })

    // 户外运动
    let exercise = [1, 2, 3]
    exercise.forEach(function (v) {
        $("#exercise" + v).tyslide({
            boxh: 342,//盒子的高度
            w: 426,//盒子的宽度
            h: 342,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: 20,//控制按钮宽度
            controlsH: 3,//控制按钮高度
            radius: 50,//控制按钮圆角度数
            controlsColor: "#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
            isShowNum: true //是否显示数字
        });
    });



    // 童装的轮播图
    let child = [1, 2, 3]
    child.forEach(function (v) {
        $("#child" + v).tyslide({
            boxh: 342,//盒子的高度
            w: 426,//盒子的宽度
            h: 342,//图片的高度
            isShow: true,//是否显示控制器
            isShowBtn: true,//是否显示左右按钮
            controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
            controlsW: 20,//控制按钮宽度
            controlsH: 3,//控制按钮高度
            radius: 50,//控制按钮圆角度数
            controlsColor: "#d7d7d7",//普通控制按钮的颜色
            controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
            isShowNum: true //是否显示数字
        });
    });


    // 推广商品的点击切换
    $('.extendTop a span').click(function () {
        $(this).siblings('span').removeClass('in')
        $(this).addClass('in')
        let $index = $(this).index()
        $(this).closest('.extend').find('.extendBtm').addClass('din')
        $(this).closest('.extend').find(`.extendBtm:eq(${$index})`).removeClass('din')
    })


    // 回到顶部
    $('.top').click(function () {
        let jsq = setInterval(function () {
            window.scrollTo(0, scrollY - 200)
            if (scrollY === 0) {
                clearInterval(jsq)
            }
        }, 20)
    })

    // 家具日用li的高
    $('.dailyrr li:lt(4)').css({ height: '320px' })
    $('.dailyrr li:gt(3)').css({ height: '170px' })
})

// 尾部的购物指南 首行加粗
$('.guide li:lt(5)').css({ fontWeight: 'bold', fontSize: '16px' })


// 楼层
let col = ['#faa755', '#f58f98', '#b7ba6b', '#6f60aa', '#dbce8f']
$('.floor p').hover(function () {
    let $index = $(this).index()
    $(this).css({
        backgroundPositionX: '-40px',
        width: '80px',
        transition: 'all 0.1s',
        backgroundColor: col[$index]
    })

}, function () {
    $(this).css({
        backgroundPositionX: '0',
        width: '40px',
        backgroundColor: '#ccc'
    })
})

// 跳楼
$('.floor p').click(function () {
    let $index = $(this).index()
    let $scroll = $(`.jump:eq(${$index})`).offset().top
    $('html,body').stop().animate({ scrollTop: $scroll }, 500)
})


// 小广告
$('.adlet').hover(function () {
    $('.qr').stop().animate({ left: '-100px' }, 600)
}, function () {
    $('.qr').stop().animate({ left: '40px' }, 600)
})


// 头部搜索框
$(window).scroll(function () {
    // 滚动获取到顶部的距离
    let $tp = $('.topSearch').offset().top
    // 显示隐藏
    if ($tp >= 100) {
        $('.topSearch').css({ display: 'block' })
        // 输入框内容同同步
        let $val2 = $('.topSearch input').val()
        $('.search input').val($val2)
    } else {
        $('.topSearch').css('display', 'none')
        // 输入框内容同同步
        let $val1 = $('.search input').val()
        $('.topSearch input').val($val1)
    }

})
